<template>
  <div class="work-order-count-card" :style="{ backgroundColor: bgColor }">
      <!-- 标题组件 -->
      <Title :title="title"></Title>

      <!-- 工单总数显示 -->
      <div class="work-order-count-content">
          <div class="total-count">
              <span class="count-number">{{ workorderCount }}</span>
              <span class="count-label">工单总数</span>
          </div>

          <!-- 图表容器（保留以备后用） -->
          <div ref="chartContainer" style="height: 10px;"></div>
      </div>
  </div>
</template>

<script>
import { get } from '@/utils/request';

export default {
  props: {
      // 允许父组件自定义背景颜色
      bgColor: {
          type: String,
          default: '#ccfff1'
      },
      // 允许自定义标题
      title: {
          type: String,
          default: '工单统计'
      }
  },
  data() {
    return {
      // 设备数据对象，包含总设备数、在线设备数和离线设备数，初始值都为 0
      deviceData: {
        total: 0,
      },
      // 工单总数，初始值为 0
      workorderCount: 0
    };
  },
  created() {
    // 调用获取工单总数的方法
    this.fetchWorkorderCount();
  },
  methods: {
      // 获取工单数据
      async fetchWorkorderCount() {
      try {
        // 发起 HTTP GET 请求，使用分页查询接口获取工单总数，当前页码为 1，每页显示 10 条记录
        const res = await get('/workorder/pageQuery', {
          page: 1,
          pageSize: 10
        });
        // 在控制台打印工单总数的响应信息，用于调试
        console.log('工单总数响应:', res); 
        // 检查响应是否存在且包含数据
        if (res && res.data) {
          // 根据接口文档，分页查询应返回 total 字段，将其赋值给 workorderCount，若不存在则为 0
          this.workorderCount = res.data.total || 0;
        }
      } catch (error) {
        // 若请求出错，在控制台打印错误信息
        console.error('获取工单总数失败:', error);
        // 假设 $message 是 Vue 项目中使用的消息提示组件，显示错误提示信息
        this.$message.error('获取工单总数失败');
          }
      }
  },
};
</script>

<style lang="less" scoped>
.work-order-count-card {
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
      transform: translateY(-2px);
  }

  .work-order-count-content {
      margin-top: 15px;
      text-align: center;

      .total-count {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 120px;

          .count-number {
              font-size: 48px;
              font-weight: bold;
              color: #1890ff;
              line-height: 1;
          }

          .count-label {
              margin-top: 10px;
              font-size: 16px;
              color: #666;
          }
      }
  }
}
</style>